<template>
    <div class="return-book">
      <h2>Return Confirmation</h2>
      <div class="book-info">
        <p><strong>Title:</strong> {{ book.bookname }}</p>
        <p><strong>Author:</strong> {{ book.author }}</p>
        <p><strong>ISBN:</strong> {{ book.isbn }}</p>
      </div>
      
      <div class="buttons">
        <button @click="confirmReturn">Confirm</button>
        <button @click="cancel">Close</button>
      </div>
      
      <!-- 添加成功消息的显示 -->
      <div v-if="showSuccessMessage" class="success-message">
        Return succeeded or return has been completed!
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "ReturnConfirmation",
    props: {
      book: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        showSuccessMessage: false, // 添加成功消息的显示状态
        userId: null,
      };
    },

    mounted() {
      this.userId = this.$globalVariable.userid; // 获取用户 ID 并存储在 userId 数据属性中
      console.log('用户 ID:', this.userId);
    },
    
    methods: {
      confirmReturn() {
        // 向后端发送请求进行还书
        this.$request.get(`/book/return?borrowId=${this.book.borrowid}`)
        .then(res => {
          console.log('Return succeeded:', res.data);
          this.showSuccessMessage = true; // 设置成功消息显示
          setTimeout(() => {
            this.showSuccessMessage = false; // 一段时间后隐藏成功消息
          }, 3000); // 3000 毫秒即 3 秒
          // 在这里可以进行其他操作，比如刷新页面等
        })
        .catch(error => {
          console.error('Return failed:', error);
          // 处理还书失败的逻辑
        });
      },
      cancel() {
        // 触发自定义事件，通知父组件关闭页面
        this.$emit('close');
      }
    }
  };
  </script>
  
  <style scoped>
  .return-book {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 500px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 1.0);
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .book-info {
    margin-bottom: 20px;
  }
  
  .return-options {
    margin-bottom: 20px;
  }
  
  .buttons {
    display: flex;
    justify-content: space-between;
  }
  
  button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  .success-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #28a745;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    animation: fadeOut 3s ease-in-out forwards;
  }
  
  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      display: none;
    }
  }
  </style>
  